<script setup lang="ts">
import '../../style/public.scss'
import ElTablePlus from '@/components/ATable/el-table-plus.vue'
import {ContractTemplateApi, ContractTemplateType} from '../api/contracttemplate/index'
import {RuleGroupApi} from '../api/rulegroup/index'
import type { TableColumn } from '@/components/ATable/types'
import { useFormDialog } from '@/components/AForm/f'
import type { ElFormItem } from '@/components/AForm/types'
import {ElTablePlusInstance} from "@/components/ATable/data";
import {ElButton} from "element-plus";
import dayjs from "dayjs";

const router = useRouter();
const colums = reactive<TableColumn[]>([
  {
    label: '文件名称',
    prop: 'name',
    useFilter: true,
    queryForms: [
      {
        label: '筛选',
        component: 'ElInput',
        prop: 'name'
      }
    ]
  },
  {
    label: '文件地址',
    prop: 'fileUrl',
  },
  {
    label: '规则分组',
    prop: 'ruleGroupName'
  },
  {
    label: '文件类型',
    prop: 'type',
    formatter:(row)=>{
      const s = ContractTemplateType.filter(e=>e.value==row.type).map(e=>e.label).join(',');
      return h('div',{},s)
    }
  },
  {
    label: '表单控件',
    prop: 'formName',
    formatter:(row)=>{
      const click=()=>{
        router.push({path:'/ai/rule-designer/'+row.id})
      }
      if (row.formName){
        return h(ElButton,{text:true,type:"primary",onClick:click},()=>row.formName)
      }else {
        return h('div')
      }
    }
  },
  {
    label: '创建时间',
    prop: 'createTime',
    formatter:(row)=>{
      const s = dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
      return h('div',{},s)
    }
  },
  {
    label: '操作',
    slot: 'op'
  }
])
const formItems = reactive<ElFormItem[]>([
  {
    label:'合同名称',
    prop: 'name',
    rules:[{required:true,message:'请输入合同名称'}],
    component: 'ElInput',
  },
  {
    label: '合同类型',
    prop: 'type',
    component: 'ElSelectPlus',
    props:{
      options:ContractTemplateType,
      fieldMap:{
        value:'value',
        label:'label'
      }
    }
  },
  {
    label:'合同文件',
    prop:'fileUrl',
    component: 'FileUploader',
    props: {
      fileTypes:['doc','docx','pdf','md','txt'],
      limit:1,
      onAfterUpload:(form:any,value:any)=>{
        if (form.name===undefined||form.name===''){
          form.name=value
        }
      }
    }
  },
  {
    label: '规则分组',
    prop: 'ruleGroupId',
    component:'ElTableSelector',
    props:{
      columns:[
        {
          label:'分组',
          prop:'name',
          useFilter:true,
          queryForms:[
            {prop:'name',component:'ElInput',}
          ]
        }
      ],
      loadFunction:RuleGroupApi.getRuleGroupPage,
      selectType:'radio',
      formart:(data:any)=>{
        return data.name||''
      },
      transferSelected:(data:any)=>{
        return data.id
      }
    },
  }
])
const table=ref<ElTablePlusInstance>()
const saveOk = (res?: any) => {
  table.value?.reload()
}
const { form,formRef } = useFormDialog(
  ContractTemplateApi.createContractTemplate,
  ContractTemplateApi.updateContractTemplate,
  formItems,
  saveOk
)
const FormDialog=form
const fr=formRef
</script>

<template>
  <div class="page">
    <el-table-plus
      title="写作模板"
      ref="table"
      :auto-load="true"
      :load-function="ContractTemplateApi.getContractTemplatePage"
      :columns="colums"
    >
      <template #tools>
        <el-button type="primary" @click="fr?.open('add')" >新增</el-button>
      </template>
      <template #op="{row}">
        <el-button link @click="fr?.open('update',row)">修改</el-button>
        <el-button link @click="router.push({path:'/ai/rule-designer/'+row.id})">表单</el-button>
        <el-button link type="danger">删除</el-button>
      </template>
    </el-table-plus>
    <FormDialog/>
  </div>
</template>

<style scoped lang="scss"></style>
